<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" >
<head>
    <style>
        .divcss5 {
            border: 1px solid #F00;
            width: 200px;
            height: 100px
        }
    </style>
    <link rel="icon" type="image/x-icon" href="img/head/favicon.ico" />
    <link rel="stylesheet" href="css/foot.css"/>
    <link rel="stylesheet" href="css/head.css"/>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
    <noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
    <script type="text/javascript" src="js/base-v1.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery-1.2.6.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/cookie.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/common.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery.cookie.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery-extend.js"></script>
    <script type="text/javascript" src="js/lib-v1.js" charset="utf-8"></script>
    <link href="css/prodList.css" rel="stylesheet" type="text/css">
    <link href="css/prodInfo.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/logout.js"></script>
    <script type="text/javascript" src="js/productinfo.js"></script>
    <link th:href="@{./detail.52d13b7b.css}"  rel="preload" as="style">
    <link th:href="@{./detail.88b7caa8.js.下载}"  rel="preload" as="script">
    <link th:href="@{./chunk-vendors.243ce88a.js.下载}"  rel="preload" as="script">
    <link th:href="@{./detail.52d13b7b.css}" rel="stylesheet">
    <script type="text/javascript" src="/js/jquery-2.1.4.min.js"  charset="utf-8"></script>
    <script type="text/javascript" src="/js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link type="text/css" rel="stylesheet" href="/js/bootstrap-3.3.7-dist/css/bootstrap.min.css">

<!--    <script type="text/javascript" src="https://unpkg.com/jquery@3/dist/jquery.slim.min.js"></script>-->
    <script type="text/javascript" src="http://fengyuanchen.github.io/distpicker/js/distpicker.js"></script>
    <meta charset="UTF-8">
    <title>商品分页</title>
    <script type="text/javascript">
    /*    var userId = "";
        var productId = "";
        window.onload = function () {
            let localUrl = decodeURI(window.location.href);
            productId = localUrl.split("?")[1].split("=")[1];
            alert(productId)

           /!* $.ajax({
                url: "http://www.supermarket.com/products/item/" + productId,
                dataType: "json",
                type: "POST",
                success: function (data) {
                    //图片
                    let imgUrl = data.productImgurl;
                    console.log(imgUrl);
                    productId = data.productId;
                    document.getElementById("prod_img").src = imgUrl;
                    document.getElementById("prod_name").innerText = data.productName;
                    document.getElementById("prod_desc").innerText = data.productDescription;
                    document.getElementById("prod_pric").innerText = data.productPrice;
                    document.getElementById("prod_num").innerText = data.productNum;
                }
            });
            let _ticket = $.cookie("EM_TICKET");
            let userPassword = $.cookie("PASSWORD");
            let userName = $.cookie("USERNAME");
            //alert(_ticket);
            if (!_ticket) {
                if (!userPassword || !userName)
                    // 二者缺一无法自动登录
                    return;
                else{
                    autoLogin(userName, userPassword);
                    return;
                }
            }*!/

          /!*  //当dataType类型为jsonp时，jQuery就会自动在请求链接上增加一个callback的参数
            $.ajax({
                url: "http://www.supermarket.com/user/query/" + _ticket,
                dataType: "json",
                type: "GET",
                success: function (data) {
                    if (data.status === 200) {
                        let _data = JSON.parse(data.data);//jackson
                        let html = _data.userName +
                            "，欢迎来到Supermarket！<a href='javascript:void(0)' class='link-logout' onclick='logout()'>[退出]</a>";
                        if (_data.userType >= 3)
                            html = html + "&nbsp;&nbsp;|&nbsp;&nbsp;<a href='http://www.Supermarket.com/manage.html' class='link-logout'>[后台]</a>";
                        userId = _data.userId;
                        $("#loginbar").html(html);
                    }else if (data.status === 201){
                        // 在redis中没找到用户
                        delCookie("EM_TICKET");
                        delCookie("USERNAME");
                        delCookie("PASSWORD");
                    }else if (data.status === 500){
                        alert(data.msg);
                    }
                },
                error: function () {
                    alert("请求失败");
                }
            });*!/
        }



        /!**
         * 自动登录
         * @param userName 用户名
         * @param userPassword 密码
         *!/
        function autoLogin(userName, userPassword) {
            $.ajax({
                url:"http://www.supermarket.com/user/autologin",
                type:"get",
                data:{
                    "userName": userName,
                    "userPassword": userPassword
                },
                dataType:"json",
                success: function (data) {
                    if (data.status === 200) {
                        let _data = data.data;//jackson
                        let html = _data.userName +
                            "，欢迎来到Supermarket！<a href='javascript:void(0)' class='link-logout' onclick='logout()'>[退出]</a>";
                        if (_data.userType >= 3)
                            html = html + "&nbsp;&nbsp;|&nbsp;&nbsp;<a href='http://www.Supermarket.com/manage.html' class='link-logout'>[后台]</a>";
                        userId = _data.userId;
                        $("#loginbar").html(html);
                    }else if (data.status === 500){
                        alert(data.msg);
                    }
                },
                error: function () {
                    alert('请求失败');
                }
            });
        }


        function search(a) {
            let query = document.getElementById(a).value;
            //alert(query);
            window.location.href = "./search.html?query=" + query;
        }*/
    function addCart(id) {
        $.ajax({
            url: "cart/addCart",
            data:{"productId":id,num:1},
            dataType: "json",
            type: "GET",
            success: function (data) {
                alert("添加成功")
            }
        });
    }

    </script>
    <script src="../static/js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>

<body>
<div id="common_head">
    <div class="line1">
        <div class="content">
            <ul>
                <li class="fore1" id="loginbar" clstag="homepage|keycount|home2013|01b">
                    <span id="head_span">
                          <a href="login.html" id="login" >登录</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                        <a href="regist.html">注册</a>

                    </span>
                </li>
            </ul>
        </div>
    </div>
    <div class="line2">
        <img id="logo" src="img/head/logo1.png" alt="logo"/>
        <input type="text" value="" accesskey="s" id="key" autocomplete="off"
               onkeydown="if(event.keyCode===13) search('key');"/>
        <input type="button" value="搜 索" onclick="search('key')"/>
        <span id="goto">
			<a id="goto_order" href="./myorder.html">我的订单</a>
			<a id="goto_cart" href="./mycart.html">我的购物车</a>
		</span>
        <a href="myself.html">
            <img id="erwm" src="img/head/e2.png" alt="e2" width="76"  />
        </a>
    </div>
    <div class="line3">
        <div class="content">
            <ul>
                <li><a href="./index.html">首页</a></li>
                <li><a href="quanbu.html">全部商品</a></li>
                <li><a href="./instant-buy.html">秒杀商品</a></li>
                <li><a href="javascript:cah(1)">电脑平板</a></li>
                <li><a href="javascript:cah(2)">家用电器</a></li>
                <li><a href="javascript:cah(3)">汽车用品</a></li>
                <li><a href="javascript:cah(4)">食品饮料</a></li>
                <li><a href="javascript:cah(5)">图书杂志</a></li>
                <li><a href="javascript:cah(6)">服装服饰</a></li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    function cah(id){
        window.location.href="shop-1.html?id="+id;
    }

</script>
<div id="app">
    <div>
        <div class="header">
            <div id="J_topbarBannerWrapper"></div>


                <div class="mi-detail">
                    <div data-v-70283663="" class="page">
                        <div data-v-70283663="" class="page-box">
                            <div data-v-70283663="" class="page-info" id="asdf">

                                <!---->

                            </div>
                        </div>
                    </div>
                </div>

        </div>
    </div>

</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">收货人信息</h4>
            </div>
            <div class="modal-body">
                <form id="myForm1">
                收货人姓名：<input type="text" class="form-control" name="consignee_name"id="consignee_name"   placeholder="收货人姓名">
                收货人电话：<input type="text" class="form-control" name="consignee_phone"id="consignee_phone"   placeholder="收货人电话">
                收货人地址：
                        <div data-toggle="distpicker">
                            <select id="seng" data-province="---- 选择省 ----"></select>
                            <select id="shi" data-city="---- 选择市 ----"></select>
                            <select id="xian" data-district="---- 选择区 ----" ></select>
                            <input type="text" id="xiang" onblur="addconsigneevalue()">
                            <input type="hidden" id="consignee_address" name="consignee_address">
                        </div>
                优惠券：   <select class="selectpicker form-control"
                               data-live-search="true" name="type" id="addid"></select>
                        <input type="hidden" id="proId">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="addconsignee()">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<script type="text/javascript">


    window.onload= function () {
        getoneshop();

        var op= "";
        var info="";
        var  id=sessionStorage.getItem("name");
        if(id !=null){

            op+="      <font color='red'> 欢迎用户: "+id+" </font>\n" +
                "  \ &nbsp;  || &nbsp;                    <a onclick=\"out()\">退出</a>&nbsp;&nbsp;&nbsp;&nbsp;"
            $("#head_span").html(op);
        }else{
            info+="<a href=\"login.html\" id=\"login\"  >登录</a>\n " +
                "&nbsp;  || &nbsp;           <a href=\"login1.html\">手机号登录</a>\n "+
                "&nbsp;  || &nbsp;           <a href=\"regist.html\">注册</a>"
            $("#head_span").html(info);
        }

    }
    function  out(){
        sessionStorage.clear("name");
        location.href="index.html"
    }

    function showSel(){
        $.ajax({
            type : 'get',
            url:"coupon/getCoupon",
            dataType : "json",
            success: function(data) {
                var opts = "<option value='0'>--请选择--</option>";
                for( var i = 0 ; i < data.length; i++ ){
                    //id          类型
                    opts += "<option value='"+data[i].coupon_id+"'>"+data[i].coupon_describe+"</option>";
                }
                // 查询界面
                $("#addid").append(opts);
            }
        });
    }

    function gou(productId){
        var pro_id = productId
        var op= "";
        var info="";
        $("#proId").val(productId);
        var  name=sessionStorage.getItem("name");
        if(name !=null){

            op+="      <font color='red'> 欢迎用户: "+name+" </font>\n" +
                "  \ &nbsp;  || &nbsp;                    <a onclick=\"out()\">退出</a>&nbsp;&nbsp;&nbsp;&nbsp;"
            $("#head_span").html(op);
            var id = "";
            let localUrl = decodeURI(window.location.href);
            id = localUrl.split("?")[1].split("=")[1];
            //location.href="consignee.html";
            //location.href="gou?id="+id
            showSel();

        }else{
            alert("当前未登录 ,请登陆");
            location.href="login.html";
            /*  info+="<a href=\"login.html\" id=\"login\"  >登录</a>\n " +
                  "&nbsp;  || &nbsp;           <a href=\"regist.html\">注册</a>"
              $("#head_span").html(info);*/
        }

    }


    function addconsignee(){
        var address="";
        address+=$("#seng").val()+" "+ $("#shi").val()+" "+$("#xian").val()+" "+$("#xiang").val();
        $("#consignee_address").val(address);
        var cname=$("#consignee_name").val();
        var cphone=$("#consignee_phone").val();
        var id=$("#proId").val();
        var couponId=$("#addid").val();

        location.href="gou?id="+id+"&address="+address+"&cphone="+cphone+"&cname="+cname+"&couponId="+couponId;
    }


    //单个商品展示
    function getoneshop() {
        var productId = "";
        let localUrl = decodeURI(window.location.href);
        productId = localUrl.split("?")[1].split("=")[1];
        //alert(productId)
        $.ajax({
            url:"getProOne",
            data:{id:productId},
            dataType: 'json',
            success:function(data){
                console.log(data)

                var op = "";
                op +="<div data-v-70283663=\"\" class=\"product-box container\">\n" +
                    "                                    <div data-v-70283663=\"\" class=\"img-left\" align=\"center\">\n" +
                    "                                        <div data-v-7121d496=\"\" data-v-70283663=\"\" class=\"product-imglist J_imgListBox\">\n" +
                    "                                            <div data-v-7121d496=\"\" class=\"img-box J_imgList\"  >\n" +
                    "                                                <img width=\"240\" height=\"300\" src="+data[0].product_imgurl+">\n" +
                    "                                            </div>\n" +
                    "                                        </div>\n" +
                    "                                    </div>\n" +
                    "                                    <div data-v-70283663=\"\" class=\"product-con\">\n" +
                    "                                        <h2 data-v-70283663=\"\"><img data-v-70283663=\"\">"+data[0].product_name+"</h2>\n" +
                    "\n" +
                    "                                        <p data-v-70283663=\"\" title=\"\" class=\"company-info\"></p>\n" +
                    "                                        <div data-v-70283663=\"\" class=\"price-info\">\n" +
                    "                                            <span data-v-70283663=\"\">"+data[0].product_price+"<!----><!---->元</span>\n" +
                    "                                        </div>\n" +
                    "                                        <h4 data-v-70283663=\"\">类型</h4>\n" +
                    "                                        <div data-v-70283663=\"\" class=\"price-info\" id='tname'  >\n" +
                    "                                                <a  data-v-381dda6a=\"\" onclick=\"typename()\" class=\"btn btn-primary\"></a>\n" +
                    "                                                <a  data-v-381dda6a=\"\" onclick=\"typename()\" class=\"btn btn-primary\"></a>\n" +
                    "                                                <a  data-v-381dda6a=\"\" onclick=\"typename()\" class=\"btn btn-primary\"></a>\n" +
                    "                                        </div>\n" +
                    "                                        <div data-v-70283663=\"\" class=\"line\"></div>\n" +
                    "                                        <p data-v-70283663=\"\" class=\"sale-desc\">\n" +
                    "                                            商品描述</p>\n" +
                    "                                       <div data-v-acfb37e4=\"\" data-v-70283663=\"\" class=\"selected-list\">\n" +
                    "                                           <div data-v-acfb37e4=\"\" class=\"total-desc\">"+data[0].product_description+"</div>\n" +
                    "                                        </div>\n" +
                    "                                        <div data-v-70283663=\"\" class=\"btn-box\">\n" +
                    "                                            <div data-v-381dda6a=\"\" data-v-70283663=\"\" class=\"sale-btn\">\n" +
                    "                                                <a  data-v-381dda6a=\"\" onclick=\"gou("+data[0].product_id+")\" class=\"btn btn-primary btn-lg\" data-toggle=\"modal\"  data-target=\"#myModal\" >购买</a>\n" +
                    "                                                <!---->\n" +
                    "                                            </div>\n" +
                    "                                            <div data-v-5d5a0502=\"\" data-v-70283663=\"\" class=\"favorite-btn\">\n" +
                    "                                                <a data-v-5d5a0502=\"\" onclick=\"addCart("+data[0].product_id+")\" class=\"btn-gray btn-like\">\n" +
                    "                                                   <i data-v-5d5a0502=\"\" class=\"iconfont default\"></i>购物车</a>\n" +
                    "                                            </div>\n" +
                    "                                        </div>\n" +
                    "\n" +
                    "                                    </div>\n" +
                    "                                </div>";



                $("#asdf").html(op);

                $.ajax({
                    url:"getProOness",
                    data:{id:productId},
                    dataType: 'json',
                    success:function(data){
                        console.log(data)

                        var typename = "";
                        for (var j = 0; j <data.length ; j++) {
                            typename +="<a  data-v-381dda6a=\"\" onclick=\"typename("+data[j].id+")\" class=\"btn btn-primary\">"+data[j].s_type+""+data[j].s_color+"</a>"
                        }

                        $("#tname").html(typename);

                    }
                })

            }
        })
    }

    function typename(id) {

        alert(id)
        $.ajax({
            url:"getTypeOne",
            data:{id:id},
            dataType: 'json',
            success:function(data){
                console.log(data)

                var op = "";
                op +="<div data-v-70283663=\"\" class=\"product-box container\">\n" +
                    "                                    <div data-v-70283663=\"\" class=\"img-left\" align=\"center\">\n" +
                    "                                        <div data-v-7121d496=\"\" data-v-70283663=\"\" class=\"product-imglist J_imgListBox\">\n" +
                    "                                            <div data-v-7121d496=\"\" class=\"img-box J_imgList\"  >\n" +
                    "                                                <img width=\"240\" height=\"300\" src="+data[0].s_img+">\n" +
                    "                                            </div>\n" +
                    "                                        </div>\n" +
                    "                                    </div>\n" +
                    "                                    <div data-v-70283663=\"\" class=\"product-con\">\n" +
                    "                                        <h2 data-v-70283663=\"\"><img data-v-70283663=\"\">"+data[0].s_name+"</h2>\n" +
                    "\n" +
                    "                                        <p data-v-70283663=\"\" title=\"\" class=\"company-info\"></p>\n" +
                    "                                        <div data-v-70283663=\"\" class=\"price-info\">\n" +
                    "                                            <span data-v-70283663=\"\">"+data[0].product_price+"<!----><!---->元</span>\n" +
                    "                                        </div>\n" +
                    "                                        <h4 data-v-70283663=\"\">类型</h4>\n" +
                    "                                        <div data-v-70283663=\"\" class=\"price-info\" id='tname'  >\n" +
                    "                                        </div>\n" +
                    "                                        <div data-v-70283663=\"\" class=\"line\"></div>\n" +
                    "                                        <p data-v-70283663=\"\" class=\"sale-desc\">\n" +
                    "                                            商品描述</p>\n" +
                    "                                       <div data-v-acfb37e4=\"\" data-v-70283663=\"\" class=\"selected-list\">\n" +
                    "                                           <div data-v-acfb37e4=\"\" class=\"total-desc\">"+data[0].product_description+"</div>\n" +
                    "                                        </div>\n" +
                    "                                        <div data-v-70283663=\"\" class=\"btn-box\">\n" +
                    "                                            <div data-v-381dda6a=\"\" data-v-70283663=\"\" class=\"sale-btn\">\n" +
                    "                                                <a  data-v-381dda6a=\"\" onclick=\"gou()\" class=\"btn btn-primary\">购买</a>\n" +
                    "                                                <!---->\n" +
                    "                                            </div>\n" +
                    "                                            <div data-v-5d5a0502=\"\" data-v-70283663=\"\" class=\"favorite-btn\">\n" +
                    "                                                <a data-v-5d5a0502=\"\" onclick=\"addCart("+data[0].product_id+")\" class=\"btn-gray btn-like\">\n" +
                    "                                                   <i data-v-5d5a0502=\"\" class=\"iconfont default\"></i>购物车</a>\n" +
                    "                                            </div>\n" +
                    "                                        </div>\n" +
                    "\n" +
                    "                                    </div>\n" +
                    "                                </div>";



                $("#asdf").html(op);
                var productId = "";
                let localUrl = decodeURI(window.location.href);
                productId = localUrl.split("?")[1].split("=")[1];
                $.ajax({
                    url:"getProOness",
                    data:{id:productId},
                    dataType: 'json',
                    success:function(data){
                        console.log(data)

                        var typename = "";
                        for (var j = 0; j <data.length ; j++) {
                            typename +="<a  data-v-381dda6a=\"\" onclick=\"typename("+data[j].id+")\" class=\"btn btn-primary\">"+data[j].s_type+""+data[j].s_color+"</a>"
                        }

                        $("#tname").html(typename);

                    }
                })
            }
        })
    }





</script>
<!--<div id="warp">
    <div id="left">
        <div id="left_top">
            <img src="" id="prod_img" alt="prod_img"/>
        </div>
        <div id="left_bottom"></div>
    </div>
    <div id="right">
        <div id="right_top">
            <span id="prod_name">商品名字：<br/></span>
            <br>
            <span id="prod_desc">商品介绍：<br/></span>
        </div>
        <div id="right_middle">
				<span id="right_middle_span">
                    supermarket 价：<span class="price_red" id="prod_pric">1111</span>元<br/>
			            运     费：满 100 免运费<br/>
			            服     务：由supermarket负责发货，并提供售后服务<br/>
                    库存：<span id="prod_num">1111</span>件<br/>
                    <label for="buyNumInp">购买数量：</label>
	                <a href="javascript:void(0)" id="delNum" onclick="change(-1)">-</a>
	                <input id="buyNumInp" name="buyNum" type="text" value="1"/>
		            <a href="javascript:void(0)" id="addNum" onclick="change(1)">+</a>
                </span>
        </div>
        <div id="right_bottom">
            <input class="add_cart_but" type="button" onclick="addCart()" value="🛒 加入购物车"/>
        </div>
    </div>
</div>-->




</body>
</html>